import {
  Button,
  Form,
  FormItem,
  Image,
  Input,
  message,
  Radio,
  RadioGroup,
  RangePicker,
  Select,
  SelectOption,
  Space,
  Spin,
  Upload
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import * as xlsx from 'xlsx'

import { activityRuleApi, commonApi, commonMenuApi } from '@/apis'
import { AddRule, RuleListItem } from '@/apis/activityRuleTypes'
import { IndexBlockGoodsItem, IndexBlockItem } from '@/apis/commonMenyTypes'
import {
  ProEditor,
  ProEditorProps,
  ProEditorRef,
  ProTableRef
} from '@/components'
import { useBack, useDialog } from '@/hooks'
import router from '@/router'

export default defineComponent({
  name: 'AddOrEditActivity',
  setup() {
    const { handleCancel } = useBack('refreshIndexBlockList')

    const loading = ref(false)
    const route = useRoute()
    const addRule = ref({} as AddRule)
    const curOptionItem = ref({} as IndexBlockGoodsItem)
    const curOptionItemRef = ref({} as IndexBlockGoodsItem)
    const showDialog = ref(false)
    const dialogLoading = ref(false)
    const submitLoading = ref(false)
    const tableRef = ref({} as ProTableRef)
    const editorRef = ref({} as ProEditorRef)
    const editorConfig = ref({
      wrapStyle: {
        width: '702px'
      },
      editorStyle: {
        height: '300px'
      },
      editorHtml: '',
      editorVisible: false,
      editorConfig: {
        MENU_CONF: {
          uploadImage: {
            server: commonApi.uploadFileUrl,
            fieldName: 'file',
            customInsert(res: any, insertFn: any) {
              // res 即服务端的返回结果
              const url = res.data
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(url, '', '')
            },
            maxFileSize: 10 * 1024 * 1024,
            onError(file: File, err: any, res: any) {
              if (file && file.size > 10 * 1024 * 1024) {
                message.error('图片超过10M，请压缩图片或分段上传')
              }
            }
          }
        } as any
      },
      toolbarConfig: {
        excludeKeys: ['group-video']
      }
    } as ProEditorProps)
    onMounted(() => {
      editorConfig.value.editorVisible = true
    })
    const ruleTitle = ref('')
    const ruleType = ref('')
    //保存
    async function submit() {
      addRule.value.ruleDetails = editorRef.value.editor.getHtml()
      try {
        await activityRuleApi.createRule(addRule.value)
        showDialog.value = false
      } finally {
        dialogLoading.value = false
      }
      router.push({
        name: 'RuleManage'
      })
    }
    const { showConfirm } = useDialog()

    return {
      loading,
      addRule,
      editorRef,
      submitLoading,
      tableRef,
      curOptionItem,
      showDialog,
      dialogLoading,
      editorConfig,
      handleCancel,
      submit
    }
  },
  render() {
    return (
      <div>
        <Spin spinning={this.loading}>
          <Form labelCol={{ span: 2 }}>
            <FormItem label="规则标题" required>
              <Input
                maxlength={60}
                v-model:value={this.addRule.ruleTitle}
                placeholder="请输入"
                style={{ width: '300px' }}
              />
            </FormItem>
            <FormItem label="活动类型：" required>
              <RadioGroup v-model:value={this.addRule.ruleType}>
                <Radio value={1}>积分排行榜</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="规则详情：" required>
              <ProEditor ref="editorRef" {...this.editorConfig} />
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                loading={this.submitLoading}
                onClick={this.submit}
                style={{ marginTop: '30px', marginLeft: '90px' }}
              >
                保存
              </Button>
            </FormItem>
          </Form>
        </Spin>
      </div>
    )
  }
})
